<template>
	<view class="white_bg">
		
		<!-- 导航栏 -->
		<u-navbar :autoBack="true" title="我赞过的">
		</u-navbar>
		
		<view style="height: 44px;"></view>

		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" :down="downOptions" :up="downOptions">

			<!-- 吸顶悬浮菜单 -->
			<u-sticky bgColor="#fff" style="width: 750upx;background-color: #FFFFFF;">
				<u-tabs :current="currentTab" :list="tabsList" @click="tabsClick"
						lineWidth="40" :scrollable="false" :activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" itemStyle="height: 45px;font-size: 21px;">
				</u-tabs>
			</u-sticky>


			<!-- 数据列表 -->
			<swiper :style="{height: wHeight + 'px'}" :current="currentTab" @change="swiperChange">

				<swiper-item>
					<like-article-list ref="articleListR" :height="wHeight" @video_play="videoPlayBack"></like-article-list>
				</swiper-item>

				<swiper-item>
					<reply-list ref="reolyListR" :height="wHeight" @video_play="videoPlayBack"></reply-list>
				</swiper-item>

			</swiper>
			
			<!-- 视频播放 -->
			<video-play ref="play"></video-play>
			
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import LikeArticleList from './cpns/userLikeArticleList.vue'
	import ReplyList from  "./cpns/userLikeReplyList.vue";
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			LikeArticleList,
			ReplyList,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				downOptions: {
					// 是否启用下拉刷新
					use: false
				},
				// 是否已登录
				hasLogin: false,
				// swiper的高度
				wHeight: 600,
				// 当前菜单索引
				currentTab: 0,
				tabsList: [{name: '帖子'}, {name: '评论'}],
			}
		},
		created() {
			// 设置swiper的高度
			this.wHeight = uni.getSystemInfoSync().windowHeight - 44
		},
		onLoad() {
			this.hasLogin = this.$authUtil.isLoginedin()
			if(!this.hasLogin){
				uni.navigateBack({
					delta: 1
				});
			}
			this.initPage()
		},
		methods: {
			initPage(){
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}
				})
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// swiper切换
			swiperChange(e) {
				this.currentTab = e.detail.current
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}
					
				})
			},
			// tabs点击事件
			tabsClick(e) {
				this.currentTab = e.index
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}
					
				})
			},
			// 获取指定下标的ref对象
			getSwiperItemScroll(i){
				let refName = null
				if(this.currentTab == 0){
					refName = 'articleListR'
				}else if(this.currentTab == 1){
					refName = 'reolyListR'
				}
				if(!refName){
					return null
				}
				return this.$refs[refName];
				
			},
			

		}
	}
</script>

<style>

</style>
